<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
    <title>At.js</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://web.etiantian.com/js/o/jplugins/at/20141028/dist/css/jquery.atwho.min.css" />
    <script src="http://web.etiantian.com/js/o/jquery/1.7.1/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://web.etiantian.com/js/o/jplugins/caret/20141028/dist/jquery.caret.min.js"></script>
    <script type="text/javascript" src="http://web.etiantian.com/js/o/jplugins/at/20141028/dist/js/jquery.atwho.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var emojis = [
                "smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
                "a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
                "arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
                "arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
                "art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
                "balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
                "bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
                "bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
                "boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
                "boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
                "person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
                "point_down", "point_left", "point_right", "point_up", "point_up_2",
                "police_car", "poop", "post_office", "postbox", "pray", "princess",
                "punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
                "up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
                "warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
                "white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
                "womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
                "-1"
            ]

            var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你"];

            var names = $.map(names,function(value,i) {
                return {'id':i,'name':value,'email':value+"@email.com"};
            });
            var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});




            var emoji_config = {
                at: ":",
                data: emojis,
                tpl:"<li data-value=':${key}:'>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png'  height='20' width='20' /></li>",
                insert_tpl: "<img src='https://assets-cdn.github.com/images/icons/emoji/${name}.png'  height='20' width='20' />",
                delay: 400
            }


            var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava",
                "Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你"];

            var names = $.map(names,function(value,i) {
                return {'id':i,'name':value,'email':value+"@email.com"};
            });

            var at_config = {
                at: "@",
                data: names,
                tpl: "<li data-value='@${name}'>${name} <small>${email}</small></li>",
                show_the_at: true
            }

            $inputor = $('#inputor').atwho(at_config).atwho(emoji_config);
            $inputor.caret('pos', 47);
            $inputor.focus().atwho('run');

        });

    </script>

    <style type="text/css">
        html, body {
            background:#F9F9F9;
            padding: 0;
            margin: 0;
            font: 14px/1.6 "Lucida Grande", "Helvetica","Microsoft YaHei", sans-serif;
            color: #333;
        }
        h1,h2,h3,h4 {
            font-family: 'PT Sans', sans-serif;
            line-height: 40px;
            color: inherit;
            font-weight: bold;
            margin: 10px 0;
            text-rendering: optimizelegibility;
        }
        h2,h3 {
            color: gray;
        }
        strong {
            color: #424242;
        }

        a {
            color: #4183C4;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .wrapper {
            width: 750px;
            padding: 20px;
            margin: 0 auto;
        }
        header {
            margin-top:70px;
            margin-bottom: 50px;
        }
        header h1 {
            text-align: center;
            font-size: 75px;
        }
        h1 i {
            color: rgb(182, 180, 180);
            font-style: normal;
            font-weight: normal;
        }

        .inputor {
            height: 160px;
            width: 90%;
            border: 1px solid #dadada;
            border-radius: 4px;
            padding: 5px 8px;
            outline: 0 none;
            margin: 10px 0;
            background: white;
            font-size: inherit;
            overflow-y: scroll;
        }
        .inputor:focus {
            border: 1px solid rgb(6, 150, 247);
        }

        ul.doc {
            list-style:none;
        }
        ul.doc li {
            display:inline-block;
            margin: 0 10px;
        }

        footer {
            margin: 30px 0;
        }

        .github {
            text-align: center;
        }

    </style>

</head>
<body>

<div class="container wrapper">
    <a id="github" href="https://github.com/ichord/At.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:999" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <header>
        <h1>At<i>.js</i></h1>
    </header>
    <div id="main">
        <div>
            <textarea id="inputor" class="inputor">At.js, a github-like autocomplete library :s</textarea>
        </div>



    </div>
</div>
</body>
</html>


